<template>
  <div class="vc-page vc-page-parts">
    <!-- 左侧 - 菜单树 -->
    <el-tree-sider
      tree-title="菜单树"
      node-icon="vc-icon vc-icon-tree-menu"
      :data="orgTreeData"
      :default-checked-node="defaultChecked"
      :handle-menu="true"
      :menu-events="menuEvents"
      :addable="true"
      @refresh="getAllMenu"
      @node-click="handleNodeClick"
      @add="addMenu"/>

    <!-- 右侧 - 菜单详情 -->
    <div class="part-right">
      <!-- 菜单信息 -->
      <div class="vc-detail-info">
        <div class="title-bg">
          <div class="icon bg-primary"></div>
          <span>菜单信息</span>
        </div>

        <el-row v-for="(item, index) in menuShowItems" :key="index">
          <template v-for="(value, key) in item">
            <el-col :span="3" class="label" :key="key">{{ value }}</el-col>
            <el-col :span="9" :key="value">
              <i v-if="key === 'icon'" :class="iconPrefix + menuInfo[key]"/>
              <template v-else>{{ menuInfo[key] }}</template>
            </el-col>
          </template>
        </el-row>
      </div>

      <!-- 权限信息 -->
      <div class="vc-detail-info">
        <div class="title-bg">
          <div class="icon bg-primary"></div>
          <span>权限信息</span>
        </div>

        <el-row v-for="(value, key) in permShowItems" :key="value">
          <el-col :span="3" class="label">{{ value }}</el-col>
          <el-col :span="21">{{ permInfo[key] }}</el-col>
        </el-row>
      </div>

      <!-- 新增菜单 -->
      <add-menu :pid="pid" :dialogVisible="addDialogVisible" @close="closeAddDialog"></add-menu>

      <!-- 修改菜单 -->
      <edit-menu :entity="entity" :dialogVisible="editDialogVisible" @close="closeEditDialog"></edit-menu>

      <!-- 分配到权限 -->
      <assign-perms :id="entity.id" resourceType="menu" :dialogVisible="assignDialogVisible" @close="closeAssignDialog"></assign-perms>

    </div>
  </div>
</template>

<script>
import config from '@/configure';
import AddMenu from './addMenu';
import EditMenu from './editMenu';
import AssignPerms from './assignPerms';

export default {
  name: 'menus',
  components: { AddMenu, EditMenu, AssignPerms },
  provide() {
    return {
      iconPrefix: this.iconPrefix
    }
  },
  data() {
    return {
      // 菜单树
      orgTreeData: null,
      defaultChecked: {},
      menuEvents: [
        {
          name: '新增同级菜单',
          event: data => {
            this.entity = data;
            this.addMenu(false);
          }
        },
        {
          name: '新增子菜单',
          event: data => {
            this.entity = data;
            this.addMenu(true);
          }
        },
        {
          name: '修改菜单',
          event: data => {
            this.entity = data;
            this.editDialogVisible = true;
          }
        },
        {
          name: '分配到权限',
          event: data => {
            this.entity = data;
            this.assignDialogVisible = true;
          }
        },
        {
          name: '删除菜单',
          event: data => {
            this.entity = data;
            this.delBtnMenu();
          }
        }
      ],
      entity: {},
      pid: '',
      id: '',
      // 菜单详情
      menuInfo: {
        name: '',
        pname: '',
        url: '',
        icon: '',
        code: '',
        showOrder: ''
      },
      menuShowItems: [
        {
          name: '菜单名称',
          pname: '上级菜单'
        },
        {
          url: '菜单地址',
          icon: '菜单图标'
        },
        {
          code: '菜单编码',
          showOrder: '显示排序'
        }
      ],
      permInfo: {
        permissionName: '',
        permissionCode: '',
        name: '',
        descr: ''
      },
      permShowItems: {
        permissionName: '权限名称',
        permissionCode: '权限编码',
        name: '操作名称',
        descr: '操作描述'
      },
      addDialogVisible: false,
      editDialogVisible: false,
      assignDialogVisible: false,
      iconPrefix: config.menuIconPrefix
    }
  },
  mounted() {
    this.getAllMenu();
  },
  methods: {
    /**
     * 获取左侧菜单树数据
     */
    getAllMenu() {
      this.$api.getAllMenu().then(res => {
        if (!res.success || !res.data || !res.data.length) {
          this.menuInfo = this.GLOBAL.object.clearValOfObj(this.menuInfo);
          this.permInfo = this.GLOBAL.object.clearValOfObj(this.permInfo);
          return;
        }
        this.orgTreeData = this.GLOBAL.array.transToTreeData(res.data);
        this.defaultChecked = this.orgTreeData[0];
      });
    },
    /**
     * 树节点被点击时的回调
     */
    handleNodeClick(data) {
      this.id = data.id;
      this.getMenuDetail(data.id);
      this.findInfoByResourceIdAndType(data.id);
    },
    /**
     * 获取右侧菜单详情数据
     */
    getMenuDetail(id) {
      this.$api.getMenuDetail({
        data: {
          id: id
        }
      }).then(res => {
        if (!res.success || !res.data) {
          this.menuInfo = this.GLOBAL.object.clearValOfObj(this.menuInfo);
          return;
        }
        this.menuInfo = res.data;
        this.menuInfo.pname = this.getName(this.menuInfo.pid);
      });
    },
    getName(id) {
      if (!id) return '';
      let res = JSON.parse(JSON.stringify(this.orgTreeData)).filter(item => item.id == id);
      return res.length ? res[0].name : '';
    },
    /**
     * 通过ID获取该菜单对应的所有权限
     */
    findInfoByResourceIdAndType(id) {
      this.$api.findInfoByResourceIdAndType({
        data: {
          resourceId: id,
          type: 'menu'
        }
      }).then(res => {
        if (!res.success || !res.data) {
          this.permInfo = this.GLOBAL.object.clearValOfObj(this.permInfo);
          return;
        }
        this.permInfo = res.data;
      });
    },
    /**
     * 删除菜单点击事件
     */
    delBtnMenu() {
      this.$confirmBox(this.delMenu);
    },
    /**
     * 删除菜单
     */
    delMenu() {
      this.$api.deleteMenuById({
        data: {
          id: this.entity.id
        }
      }).then(res => {
        this.getAllMenu();
        res.success && this.$notifyBox('删除成功', 'success');
      });
    },
    /**
     * 新增菜单
     */
    addMenu(val) {
      this.addDialogVisible = true;
      this.pid = val ? this.entity.id : this.entity.pid;
    },
    /**
     * '新增'弹出框关闭事件
     */
    closeAddDialog(val) {
      this.addDialogVisible = false;
      val && this.getAllMenu();
    },
    /**
     * '修改'弹出框关闭事件
     */
    closeEditDialog(val) {
      this.editDialogVisible = false;
      val && this.getAllMenu();
    },
    /**
     * '分配到权限'弹出框关闭事件
     */
    closeAssignDialog(val) {
      this.assignDialogVisible = false;
      this.findInfoByResourceIdAndType(this.id);
    }
  }
}
</script>

<style lang="less">
.select-icon {
  .el-input__inner {
    cursor: pointer !important;
  }
}
</style>